<template>
  <Main :type="'form'">
    <div v-if="shows == 'custormer'">
      <custormer
        :custormer-code="custormerCode"
        :card-code="cardCode"
        :one-code="oneCode"
        @out="outs"
      ></custormer>
    </div>
    <div v-if="shows == 'page'">
      <Title :title="'商品管理-订单详情'" />

      <div v-if="detailcode.status != 2 || ''" style="margin: 15px 80px;">
        <el-steps
          v-if="detailcode.status != 8 || ''"
          :active="
            detailcode.status == 0
              ? 1
              : detailcode.status == 1
              ? Number(detailcode.status) + 1
              : Number(detailcode.status)
          "
          finish-status="success"
        >
          <el-step title="买家下单" description=""></el-step>
          <el-step title="买家付款" description=""></el-step>
          <el-step title="商家发货" description=""></el-step>
          <el-step title="交易完成" description=""></el-step>
          <el-step title="已评论" description=""></el-step>
        </el-steps>
      </div>
      <div v-if="detailcode.status == 8 || ''" style="margin: 15px 80px;">
        <el-steps
          v-if="detailcode.status == 8 || ''"
          :active="3"
          finish-status="success"
        >
          <el-step title="买家下单" description=""></el-step>
          <el-step title="买家付款" description=""></el-step>
          <el-step title="已退款" description=""></el-step>
        </el-steps>
      </div>
      <div
        v-if="detailcode.status == 2 || ''"
        id="step"
        style="margin: 15px 20px;"
      >
        <el-steps :active="2" finish-status="success">
          <el-step title="买家下单" description=""></el-step>
          <el-step title="支付取消" description=""></el-step>
        </el-steps>
      </div>

      <div
        style="display:flex;justify-content: space-around;margin-top: 50px;width:70%"
      >
        <div>
          <div style="font-weight: 700;font-size:16px;color:#2589ff">
            <span>配送信息</span>
          </div>
          <div style="margin-top:10px;">
            <ul style="line-height:30px;">
              <li>
                配送方式:<span
                  >&nbsp;&nbsp;{{
                    detailcode.distributiontype == 1
                      ? "商家配送"
                      : detailcode.distributiontype == 2
                      ? "同城限时达"
                      : detailcode.distributiontype == 3
                      ? "到店自提"
                      : "" || "暂无配送"
                  }}</span
                >
              </li>
              <li>配送时间:<span>&nbsp;&nbsp;2019-09-09 15:03:22</span></li>
              <li>
                买家昵称:<span
                  >&nbsp;&nbsp;{{ detailcode.member__nick_name }}</span
                >&nbsp;&nbsp;<span style="color:blue;cursor:pointer"
                  >联系客户</span
                >&nbsp;&nbsp;
                <!-- <span
                    style="color:blue;cursor:pointer"
                    @click="customerdetaile(detailcode.member_id)"
                    >客户详情</span
                  > -->
              </li>
              <li>
                收货信息:&nbsp;&nbsp;{{ addresscode.position }},{{
                  addresscode.address
                }}<i
                  class="el-icon-edit"
                  style="color:blue;cursor:pointer"
                  @click="dialogVisible = true"
                ></i>
              </li>
              <li>
                备注信息:<span>&nbsp;&nbsp;{{ detailcode.pay_comment }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div style="font-weight: 700;font-size:16px;">
            订单状态:&nbsp;&nbsp;
            <span v-if="detailcode.status == 0" style="color:#1890FF;">
              待支付
            </span>
            <span v-if="detailcode.status == 1" style="color:#1890FF;">
              支付成功，待发货
            </span>
            <span v-if="detailcode.status == 2" style="color:#FF4E4E;">
              支付取消
            </span>
            <span v-if="detailcode.status == 3" style="color:#1890FF;">
              待收货
            </span>
            <span v-if="detailcode.status == 4" style="color:#1890FF;">
              待评价
            </span>
            <span v-if="detailcode.status == 5" style="color:#009800;">
              订单完成
            </span>
            <span v-if="detailcode.status == 6" style="color:#1890FF;">
              待退货
            </span>
            <span v-if="detailcode.status == 7" style="color:#FF4E4E;">
              拒绝退款
            </span>
            <span v-if="detailcode.status == 8" style="color:#1890FF;">
              已退款
            </span>
            <span v-if="detailcode.status == 9" style="color:#FF4E4E;">
              已支付，订单异常
            </span>
            <span v-if="detailcode.status == 10" style="color:#009800;">
              支付成功，拼团未成功
            </span>
            <span v-if="detailcode.status == 11" style="color:#FF4E4E;">
              退款失败
            </span>
          </div>
          <div style="margin-top:10px;">
            <ul
              v-if="detailcode.status != 2 && detailcode.status != 5"
              style="line-height:35px;"
            >
              <li><span>买家已经提交订单，请尽快发货</span></li>
              <li>
                <div style="display: flex;">
                  <!-- <el-button type="primary" size="mini" plain>修改价格</el-button> -->
                  <el-button
                    v-if="detailcode.status == 1 || ''"
                    type="primary"
                    size="mini"
                    plain
                    @click="
                      courierd(detailcode.id, detailcode.distributiontype)
                    "
                    >{{
                      detailcode.distributiontype == 1
                        ? "发货"
                        : detailcode.distributiontype == 3 || 2
                        ? "备货"
                        : ""
                    }}</el-button
                  >
                  <el-button
                    v-if="detailcode.status != 2 && detailcode.status != 5"
                    type="primary"
                    size="mini"
                    plain
                    @click="orderpass(detailcode.member_id, detailcode.id)"
                    >取消订单</el-button
                  >
                  <!-- <el-button size="mini" plain>标记<i class="el-icon-edit" ></i></el-button> -->
                </div>
              </li>
              <!-- <li>标记内容:<span></span></li> -->
            </ul>
          </div>
        </div>
      </div>

      <div style="margin:20px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单详情" name="first">
            <div class="list-heads" style="height:100%">
              <div
                style="display:flex;justify-content: space-around; width:60%;"
              >
                <div style="margin-top: 15px;">
                  <ul style="line-height:30px;">
                    <li>
                      订单编号:<span
                        >&nbsp;&nbsp;{{ detailcode.pay_order }}</span
                      >
                    </li>
                    <li>
                      订单来源:<span
                        >&nbsp;&nbsp;{{
                          detailcode.order_from == 1 ? "小程序" : ""
                        }}</span
                      >
                    </li>
                    <li>
                      <span>订单类型：</span>
                      <span v-if="detailcode.market_type == 0">普通订单</span>
                      <span v-if="detailcode.market_type == 1">拼团订单</span>
                      <span v-if="detailcode.market_type == 2"
                        >限时折扣订单</span
                      >
                      <span v-if="detailcode.market_type == 3">分销订单</span>
                      <span v-if="detailcode.market_type == 4"
                        >积分消耗订单</span
                      >
                      <!-- <span v-if=" detailcode.market_type == 5">砍价订单</span> -->
                      <span v-if="detailcode.market_type == 6">零元抽奖</span>
                    </li>
                  </ul>
                </div>
                <div style="margin-top:20px;">
                  支付方式:<span>&nbsp;&nbsp;微信</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品" name="second">
            <div class="table-nav">
              <div class="nav-title-one">商品信息</div>
              <div class="nav-title">小计（元）</div>
              <!-- <div class="nav-title">优惠减免金额（元）</div>
                    <div class="nav-title">应收金额（元）</div>
                    <div class="nav-title">优惠抵扣（元）</div> -->
              <div class="nav-title">实收金额（元）</div>
            </div>

            <div class="list-table-content">
              <div class="table-body">
                <div class="table-content">
                  <div class="shopbox">
                    <div
                      v-for="(item, idx) in goodList"
                      :key="idx"
                      class="shopboxf"
                    >
                      <div class="imgs">
                        <img
                          :src="
                            $store.state.qiniu +
                              item.cover +
                              $store.state.imgRotate
                          "
                          width="100%"
                          height="100%"
                        />
                      </div>
                      <ul>
                        <li class="goods-name">
                          {{ item.goods__goods_name }}
                        </li>
                        <li class="goods-info">
                          数量：{{ item.nums }}
                          <span
                            v-for="(ele, idxs) in item.sku_type"
                            :key="idxs"
                            style="line-height:15px;"
                            >【{{ ele }}】</span
                          >
                        </li>
                        <li class="goods-info">单价：¥{{ item.sku_price }}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="box">
                    <span v-for="(item, idx) in goodList" :key="idx">{{
                      item.sku_price
                    }}</span>
                  </div>
                  <div class="box">
                    <span v-for="(item, idx) in goodList" :key="idx"
                      >￥{{ item.need_pay }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="content_nav">
              运费：￥{{ detailcode.distributionfee || "0.00" }}
            </div>
            <div class="content_nav">总计：￥{{ detailcode.need_pay }}</div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <Footer>
        <el-button type="primary" @click="$emit('out')">返回</el-button>
      </Footer>
      <!-- 地址提示框 -->

      <el-dialog title="收货信息编辑" :visible.sync="dialogVisible" width="30%">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货名称" prop="name">
            <el-input v-model="ruleForm.name" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="收货电话" prop="name">
            <el-input v-model="ruleForm.name" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="name">
            <el-input v-model="ruleForm.name" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="地址邮编" prop="name">
            <el-input v-model="ruleForm.name" size="medium"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 发货 -->

      <el-dialog
        title="商品发货"
        :visible.sync="dialogVisible1"
        width="25%"
        :before-close="handleClose"
      >
        <div>
          <ul style="line-height:35px;">
            <li>
              <span>订单编号:</span>&nbsp;&nbsp;{{ couriernumber.pay_order }}
            </li>
            <li><span>下单时间:</span>&nbsp;&nbsp;{{ couriernumber.ctime }}</li>
            <li>
              <span>收货信息:</span>&nbsp;&nbsp;<span>{{ addressinfo }}</span>
            </li>
          </ul>
        </div>
        <div style="margin-top:10px;">
          <span>发货方式:</span> &nbsp;&nbsp;
          <el-radio-group v-model="radio">
            <el-radio :label="1" :disabled="typeid == 2 || typeid == 3"
              >物流信息</el-radio
            >
            <el-radio :label="2" :disabled="typeid == 1">无需物流</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-top:10px;">
          <el-form
            ref="form"
            :model="form"
            :rules="rule"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div v-if="kuaidi && typeid == 1">
              <el-form-item label="快递公司" prop="no">
                <el-select v-model="form.no" placeholder="请选择快递">
                  <el-option
                    v-for="(item, index) in couriercode"
                    :key="index"
                    :label="item.name"
                    :value="item.express_id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="快递单号" prop="orders" style="width:320px;">
                <el-input v-model="form.orders"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="besure('form')">确定</el-button>
          <el-button @click="quxiao('form')">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </Main>
</template>
<script>
import {
  COURIER,
  ORDERDDETAIL,
  COURIERFORM,
  CUSTOTMER,
  ORDERINFO
} from "../service";
export default {
  name: "Shopdetail",
  components: {
    custormer: () => import("./custormer")
  },
  props: {
    ordercode: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      openIsDisabled: true,
      goodscode: [],
      typeid: [],
      couriernumber: [],
      addressinfo: [],
      goodList: [],
      custormerCode: {},
      cardCode: [],
      oneCode: {},
      radio: 0,
      shows: "page",
      kuaidi: true,
      couriercode: [],
      activeName: "first",
      activeName1: "first",
      dialogVisible: false,
      dialogVisible1: false,
      Url: this.$store.state.qiniu + "/",
      form: {
        orders: "",
        no: ""
      },
      rule: {
        orders: [{ required: true, message: "请输入订单号", trigger: "blur" }],
        no: [{ required: true, message: "请选择快递公司", trigger: "blur" }]
      },
      ruleForm: {
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      detailcode: {},
      addresscode: {}
    };
  },
  watch: {
    radio(newval) {
      switch (newval) {
        case 1:
          this.kuaidi = true;
          break;
        case 2:
          this.kuaidi = false;
          break;
      }
    }
  },
  created() {
    this.getList();
  },

  methods: {
    outs() {
      this.shows = "page";
    },
    handleClick() {},
    async getList() {
      await ORDERINFO({
        order_id: this.ordercode
      }).then(res => {
        if (res.code === 200) {
          res.data.ctime =
            res.data.ctime != null ? this.times(parseInt(res.data.ctime)) : "";
          this.detailcode = res.data;
          this.addresscode = res.address;
          res.orders_goods_list.map(ele => {
            var reg = /'/g;
            ele.sku_type = ele.sku_type.replace(reg, '"');
            ele.sku_type = JSON.parse(ele.sku_type);
            var skuTyp = [];
            var prop = [];
            ele.sku_type.map(item => {
              for (prop in item) {
                skuTyp.push(item[prop]);
              }
            });
            ele.sku_type = skuTyp;
          });

          this.goodList = res.orders_goods_list;
        } else {
          this.$message({
            message: "暂无商品信息",
            type: "error"
          });
        }
      });
    },
    // 订单取消
    orderpass(menberid, id) {
      this.$confirm("是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ORDERDDETAIL({
            menber_id: menberid,
            order_id: id
          }).then(res => {
            let { code } = res;
            if (code === 200) {
              this.$message({
                message: "取消成功",
                type: "success"
              });
              this.$emit("out");
            }
          });
        })
        .catch(() => {});
    },
    // 地址修改
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 点击客户详情
    // customerdetaile () {
    //   this.$router.push('/customer')
    // },
    // 发货弹出关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 发货 dialogVisible = true
    courierd(id, type) {
      this.ordercode = id;
      this.typeid = type;
      this.dialogVisible1 = true;
      if (type === 1) {
        this.radio = 1;
      } else {
        this.radio = 2;
      }
      COURIER({
        order_id: this.ordercode
      }).then(res => {
        let { code } = res;
        this.couriercode = res.express;
        this.addressinfo = res.address_info;
        if (code === 200) {
          res.order_info.ctime =
            res.order_info.ctime != null
              ? this.times(parseInt(res.order_info.ctime))
              : "";
          this.couriernumber = res.order_info;
        }
      });
    },
    // 发货取消确定
    besure(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          COURIERFORM({
            express_id: this.form.no,
            order_id: this.ordercode,
            no: this.form.orders
          }).then(res => {
            let { code } = res;
            if (code === 200) {
              this.$message({
                message: "发货成功",
                type: "success"
              });
              this.dialogVisible1 = false;
              this.$emit("out");
            }
          });
        } else {
          return false;
        }
      });
    },
    // 客户详情
    customerdetaile(memberid) {
      this.shows = "custormer";
      CUSTOTMER({
        member_id: memberid
      }).then(res => {
        let { msg } = res;
        if (res.code === 200) {
          res.user_info.create_at =
            res.user_info.create_at != null
              ? this.times(parseInt(res.user_info.create_at))
              : "";
          this.custormerCode = res.user_info;
          res.card_list.map(ele => {
            ele.create_time =
              ele.create_time != null
                ? this.times(parseInt(ele.create_time))
                : "";
          });
          this.cardCode = res.card_list;
          this.oneCode = res.card_list[0];
        } else {
          this.$message.error(msg);
        }
      });
    },
    quxiao(form) {
      this.dialogVisible1 = false;
      this.$refs[form].resetFields();
    },
    times(timestamp) {
      var time = new Date(timestamp * 1000);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.table-nav {
  display: flex;
  background: #ebecf0;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: bold;
  padding-left: 58px;
  .nav-title-one {
    width: 30%;
    padding-left: 12px;
    box-sizing: border-box;
  }
  .nav-title {
    text-align: center;
    width: 35%;
  }
}
.list-table-content {
  color: #595961;
  font-size: 12px;
  overflow: hidden;
  .table-body {
    width: 100%;
    height: 100%;
    background: #fff;
    border-top: 16px solid #f2f2f2;

    &:nth-child(1) {
      border-top: 0;
    }
    .nav {
      height: 120px;
      border-bottom: 1px solid #e8e8e8;
      padding-top: 26px;
      box-sizing: border-box;
      padding-left: 58px;
      ul {
        font-size: 14px;
        display: flex;
        height: 36px;
        line-height: 36px;
        li {
          width: 28%;
          span {
            font-weight: bold;
          }
        }
      }
    }

    .table-content {
      display: flex;
      padding-top: 20px;
      min-height: 120px;
      padding-left: 58px;
      .box {
        text-align: center;
        margin-top: 15px;
        width: 35%;
      }
      .shopbox {
        width: 30%;
        .shopboxf {
          margin-bottom: 16px;
          display: flex;
          .imgs {
            width: 70px;
            height: 70px;
          }
          ul {
            margin-left: 12px;
            .goods-name {
              font-weight: 700;
              font-size: 14px;
            }
            .goods-info {
              color: inherit;
              display: block;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
}
.content_nav {
  text-align: right;
  width: 100%;
  height: 32px;
  margin-top: 10px;
  padding-right: 30px;
}
</style>
